<template>
  <div class="form">
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="品牌首字母" required>
        <el-input v-model="ruleForm.bigPic"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" prop="sort">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图" prop="excelFile">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌故事">
        <el-input type="textarea" v-model="ruleForm.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="type">
        <el-radio-group v-model="ruleForm.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品牌制造商" prop="resource">
        <el-radio-group v-model="ruleForm.factoryStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
.form {
  width: 800px;
  border: 1px solid #ebeef5;
  margin: 0px auto;
}
.el-input {
  width: 500px;
}
.el-textarea {
  width: 500px;
}
.el-form-item {
  margin-bottom: 22px;
  margin-top: 22px;
}
</style>
<script>
export default {
  data() {
    return {
      ruleForm: {
        bigPic: null,
        brandStory: null,
        factoryStatus: 0,
        firstLetter: null,
        logo: null,
        name: null,
        showStatus: 0,
        sort: 0
      }
    };
  },
  methods: {
    select(data) {
      this.ruleForm.parentId = data;
    },
    submitForm() {
      var that = this;
      this.$confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/brand/create", {
              bigPic: this.ruleForm.bigPic,
              brandStory: this.ruleForm.brandStory,
              factoryStatus: this.ruleForm.factoryStatus,
              firstLetter: this.ruleForm.firstLetter,
              logo: "123",
              name: this.ruleForm.name,
              showStatus: this.ruleForm.showStatus,
              sort: this.ruleForm.sort
            })
            .then(function(ret) {
              console.log(ret);
              that.$router.push("/ProductAdmin");
            });
          this.$message({
            type: "success",
            message: "提交成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },

    uploadUrl: function() {
      return "http://172.16.82.63:8080/uploadPath";
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    }
  }
};
</script>